<template>
    <div style="padding-left:5px;">
<!--        <pre>{{formData}}</pre>-->
        <el-row>
            <el-col align="left">
                <el-form>
                    <el-form-item label="被除数：">
                        <el-input v-model="formData.num1"></el-input>
                    </el-form-item>
                    <el-form-item label="除数：">
                        <el-input v-model="formData.num2"></el-input>
                    </el-form-item>
                    <el-form-item label="手动保留小数位数：">
                        <el-switch
                                v-model="formData.manualDecimalSwitch"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>

                        <span style="margin-left:5px;">
                            <el-input-number v-show="formData.manualDecimalSwitch" v-model="formData.decimal" :min="0" :max="10" :step="1"
                                             ></el-input-number>
                        </span>
                    </el-form-item>
                    <el-row>
                        <el-col align="center">
                            <el-button type="primary" @click="calc">计算</el-button>
                        </el-col>
                    </el-row>

                    <el-alert v-if="error"
                              title="计算错误，请联系管理员"
                              type="error"
                              effect="dark">
                    </el-alert>
                    <el-form-item label="结果：" v-if="!error">
                        <div style="font-size:36px;letter-spacing: 10px;">
                            {{formData.expectedResult}}
<!--                            <span>-->
<!--                                <i v-if="formData.match" class="el-icon-check"></i>-->
<!--                                <i v-else class="el-icon-close" style="color:red;"></i>-->
<!--                            </span>-->
                        </div>
                        <div :style="{'width': tableWidth}">
                            <table class="divide_table"  cellspacing="0">
                                <tr v-if="formData.quotientResult" >
                                    <td v-for="(char, index) in formData.quotientResult" :key="'result_' + index" >
                                        &nbsp;{{char == '#' ? '': char}}
                                        <span v-show="formData.pointIndex == index" class="dot_point">.</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td v-for="(char, index) in formData.combineStr" :key="'char_' + index" :class="{'border_left': formData.num1FirstCharIndex == index, 'border_top': formData.num1FirstCharIndex <= index}">
                                        {{char}}
                                        <span v-show="formData.pointIndex == index" class="dot_point">.</span>
                                    </td>
                                </tr>
                                <template v-for="(step, stepIndex) in formData.steps" >
                                    <tr :key="'tr1_' + stepIndex">
                                        <td v-for="i in step.product_padding" :key="i"></td>
                                        <td v-for="(char, index) in step.product_result + ''" :key="'result1_' + index" class="border_bottom">
                                            {{char}}
                                        </td>
                                    </tr>
                                    <tr :key="'tr2_' + stepIndex">
                                        <td v-for="i in step.mod_padding" :key="i"></td>
                                        <td v-for="(char, index) in step.remain_min_num1 + ''" :key="'result2_' + index" >
                                            {{char}}
                                        </td>
                                    </tr>
                                </template>
                            </table>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <div style="padding-left:10px;">

        </div>
    </div>

</template>

<script>
    /* eslint-disable */
    import axios from "axios";

    export default {
        name: 'divide1',
        data() {
            return {
                error: false,
                formData: {
                    // num1: 121450000000,
                    // num2: 15,
                    num1: 0.015,
                    num2: 1.2,
                    manualDecimalSwitch: false,
                    decimal: 3,
                    quotientResult: '',
                    combineStr: null,
                    num1FirstCharIndex: null,
                    pointIndex: null,
                    steps: [],

                    actualResult: null,
                    expectedResult: null,



                    resultArr:[],
                    resultLeftPadding: 0,
                    tmpResultArr: [],
                    currentIndex: 0,
                    remainNum1: null,
                },
                tableWidth: "100%",
            }
        },
        methods: {
            async calc() {
                let postData = {
                    num1: this.formData.num1,
                    num2: this.formData.num2,
                    decimal: this.formData.manualDecimalSwitch ? this.formData.decimal : -1,
                }
                try {
                    let response = await axios.post('/divide', postData)
                    // console.log('response:', response)
                    this.formData.expectedResult = response.data.expected_result
                    this.formData.quotientResult = response.data.quotient_result
                    this.formData.combineStr = response.data.combine_str
                    if (this.formData.combineStr) {
                        this.tableWidth = (50 * this.formData.combineStr.length) + 'px'
                    }
                    this.formData.num1FirstCharIndex = response.data.num1_first_char_index
                    this.formData.pointIndex = response.data.point_index
                    this.formData.steps = response.data.steps
                    this.formData.match = response.data.match
                    this.error = false
                } catch (e) {
                    this.error = true
                }

                this.$localStorage.set('divide1.formData', this.formData, 4 * 60 * 60 * 1000) // keep 1 day
            },
        },
        computed: {},
        mounted() {
            let formData = this.$localStorage.get('divide1.formData')
            if (formData) {
                this.formData = formData
            }
            this.calc()
        }
    };
</script>
<style>
    .divide_table {

    }
    .divide_table td {
        font-size: 20px;
        padding:2px;
        width: 35px;
        /*overflow: hidden;*/
        display: inline-block;
        /*white-space: nowrap;*/
    }
    .border_left {
        border-left: 3px solid green;
    }
    .border_top {
        border-top: 3px solid green;
    }
    .border_bottom {
        border-bottom: 3px solid green;
    }
    .dot_point {
        position: relative;
        color:red;
        font-size:20px;
    }
</style>
